import React,{ Component } from 'react';
import { Redirect } from 'react-router-dom';
import {connect } from 'react-redux';
import {LoginWarpper,LoginBox} from './style';
import 'antd/dist/antd.css';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { actionCreaters }  from './store';
const FormItem = Form.Item;
class NormalLoginForm extends React.Component {
        handleSubmit = (e) => {
            e.preventDefault();
            this.props.form.validateFields((err, values) => {
                if (!err) {
                     this.props.login(values.userName,values.password)
                }
            });
        };

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <FormItem>
                    {getFieldDecorator('userName', {
                        rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" ref={(input)=>{this.account=input}}/>
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" ref={(input)=>{this.password=input}}/>
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                    })(
                        <Checkbox>记住我</Checkbox>
                    )}
                    {/* <a className="login-form-forgot" href="#">忘记密码？</a> */}
                    <Button type="primary"  className="login-form-button" htmlType="submit" >
                        登录
                    </Button>
                </FormItem>
            </Form>
        );
    }
}

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);

class Login extends  Component {
    render() {
        if(this.props.login){
            return(
                <Redirect to="/" />
            )
        }else{
            return (
                <LoginWarpper>
                    <LoginBox>
                        <p className="loginTitle">登录</p>
                        <WrappedNormalLoginForm login={this.props.logins}/>
                    </LoginBox>
                </LoginWarpper>
            )
        }

    }
}


const mapStateToProps=(state)=>{
    return{
        //immutabled对象的get方法
        login:state.getIn(['login','login']),
    }
};
 const mapDispatchToProps=(dispatch)=>{
     return{
        logins(account,password){
            dispatch(actionCreaters.loginTo(account,password));
        }
     }
};
export default connect(mapStateToProps,mapDispatchToProps)(Login);
